<template>
  <el-dialog
    :title="title"
    :visible.sync="openSheet"
    width="1200px"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :before-close="cancel"
  >
    <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('DevelopprojectPlanName')" prop="projectPlanFK" :error="error.projectPlanFK">
            <el-select v-model="form.projectPlanFK" clearable filterable :placeholder="$t('inputDevelopprojectPlanName')" @change="handleChange">
              <el-option v-for="item in projectPlanOption" :key="item.project_name" :label="item.project_name" :value="item.id">
                <span style="float: left">{{ item.project_name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('quoteNo')" prop="quoteFK" :error="error.quoteFK">
            <el-select v-model="form.quoteFK" clearable filterable :placeholder="$t('inputquoteNo')" @change="handleChange">
              <el-option v-for="item in quoteOption" :key="item.quote_no" :label="item.quote_content" :value="item.id">
                <span style="float: left">{{ item.quote_no }}</span>
                <span style="float: right; font-size: 13px;color: var(--el-text-color-secondary);">{{ item.quote_content }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('projectDevelopName')" prop="project_name" :error="error.project_name">
            <el-input v-model="form.project_name" maxlength="50" show-word-limit :placeholder="$t('inputprojectDevelopName')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectDevelopOrderNo')" prop="order_no" :error="error.order_no">
            <el-input v-model="form.order_no" maxlength="10" show-word-limit :placeholder="$t('inputprojectDevelopOrderNo')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectDevelopSalesDate')" prop="sales_date" :error="error.sales_date">
            <el-date-picker v-model="form.sales_date" type="date" value-format="yyyy-MM-dd" :placeholder="$t('inputprojectDevelopSalesDate')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectDevelopQuoteAmount')" prop="quote_amount" :error="error.quote_amount">
            <el-input v-model="form.quote_amount" :placeholder="$t('inputprojectDevelopQuoteAmount')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectDevelopSalesAmount')" prop="sales_amount" :error="error.sales_amount">
            <el-input v-model="form.sales_amount" :placeholder="$t('inputprojectDevelopSalesAmount')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectDevelopProfit')" prop="operating_profit" :error="error.operating_profit">
            <el-input v-model="form.operating_profit" :placeholder="$t('inputprojectDevelopProfit')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectDevelopMargin')" prop="operating_margin" :error="error.operating_margin">
            <el-input v-model="form.operating_margin" :placeholder="$t('inputprojectDevelopMargin')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectDevelopReserveAmount')" prop="reserve_amount" :error="error.reserve_amount">
            <el-input v-model="form.reserve_amount" :placeholder="$t('inputprojectDevelopReserveAmount')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectDevelopQuoteDays')" prop="quoted_days" :error="error.quoted_days">
            <el-input v-model="form.quoted_days" :placeholder="$t('inputprojectDevelopQuoteDays')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectDevelopQuoteHours')" prop="quoted_hours" :error="error.quoted_hours">
            <el-input v-model="form.quoted_hours" :placeholder="$t('inputprojectDevelopQuoteHours')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectDevelopA1BudgetHours')" prop="a1bugdget_hours" :error="error.a1bugdget_hours">
            <el-input v-model="form.a1bugdget_hours" :placeholder="$t('inputprojectDevelopA1BudgetHours')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectDevelopA2BudgetHours')" prop="a2manage_hours" :error="error.a2manage_hours">
            <el-input v-model="form.a2manage_hours" :placeholder="$t('inputprojectDevelopA2BudgetHours')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectDevelopA3BudgetHours')" prop="a3risk_hours" :error="error.a3risk_hours">
            <el-input v-model="form.a3risk_hours" :placeholder="$t('inputprojectDevelopA3BudgetHours')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('projectDevelopNote')" prop="note" :error="error.note">
            <el-input v-model="form.note" maxlength="150" show-word-limit :placeholder="$t('inputprojectDevelopNote')" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="createFlag" type="primary" :disabled="!isModified" @click="handleCreate">{{
        $t('create')
      }}</el-button>
      <el-button v-else type="primary" :disabled="!isModified" @click="handleUpdate">{{
        $t('update')
      }}</el-button>
      <el-button @click="cancel">{{ $t('cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import sheetMixin from '@/mixins/SheetMixin'
import { createProjectDevelopApi, updateProjectDevelopApi, getProjectDevelopInitDataApi } from '../api/projectdevelop.api';
import { getDropDownMenuListApi } from '@/api/common/common'
import { getProjectPlanBaseListApi } from '@/views/projectbase/projectplanbase/api/projectplanbase.api'
import { getProjectQutaListApi } from '@/views/project/projectquota/api/projectquota.api'

export default {
  mixins: [sheetMixin],
  data() {
    return {
      formRef: 'form',
      createTitle: this.$t('projectDevelopCreateTitle'),
      updateTitle: this.$t('projectDevelopUpdateTitle'),
      menuOptions: [],
      projectPlanOption: [],
      quoteOption: [],
      AllquoteOption: [],
      actionApi: {
        'create': createProjectDevelopApi,
        'update': updateProjectDevelopApi
      },
      form: {
        projectPlanFK: undefined,
        quoteFK: undefined,
        project_name: undefined,
        order_no: undefined,
        sales_date: undefined,
        quote_amount: undefined,
        sales_amount: undefined,
        operating_profit: undefined,
        operating_margin: undefined,
        reserve_amount: undefined,
        quoted_days: undefined,
        quoted_hours: undefined,
        a1bugdget_hours: undefined,
        a2manage_hours: undefined,
        a3risk_hours: undefined,
        note: undefined
      },
      error: {
        projectPlanFK: undefined,
        quoteFK: undefined,
        project_name: undefined,
        order_no: undefined,
        sales_date: undefined,
        quote_amount: undefined,
        sales_amount: undefined,
        operating_profit: undefined,
        operating_margin: undefined,
        reserve_amount: undefined,
        quoted_days: undefined,
        quoted_hours: undefined,
        a1bugdget_hours: undefined,
        a2manage_hours: undefined,
        a3risk_hours: undefined,
        note: undefined
      },
      rules: {
        projectPlanFK: [{ required: true, message: this.$t('projectDevelopPlanisRequired'), trigger: 'blur' }],
        quoteFK: [{ required: true, message: this.$t('projectDevelopQuoteisRequired'), trigger: 'blur' }],
        project_name: [{ required: true, message: this.$t('projectDevelopNameisRequired'), trigger: 'blur' }],
        order_no: [{ required: true, message: this.$t('projectDeveloporderNoisRequired'), trigger: 'blur' }],
        quote_amount: [{ required: true, message: this.$t('projectDevelopQuoteAmountisRequired'), trigger: 'blur' }],
        sales_amount: [{ required: true, message: this.$t('projectDevelopSalesAmountisRequired'), trigger: 'blur' }],
        operating_profit: [{ required: true, message: this.$t('projectDevelopProfitisRequired'), trigger: 'blur' }],
        operating_margin: [{ required: true, message: this.$t('projectDevelopMarginisRequired'), trigger: 'blur' }],
        quoted_days: [{ required: true, message: this.$t('projectDevelopQuoteDaysisRequired'), trigger: 'blur' }],
        quoted_hours: [{ required: true, message: this.$t('projectDevelopQuoteHoursisRequired'), trigger: 'blur' }],
        a1bugdget_hours: [{ required: true, message: this.$t('projectDevelopA1BudgetHoursisRequired'), trigger: 'blur' }]
      }
    };
  },
  computed: {
    labelWidth() {
      return this.$i18n.locale === 'en' ? '150px' : '130px';
    }
  },
  methods: {
    initialize() {
      this.getProjectPlanOption()
      this.getQuoteData()
    },
    async getMenuOption() {
      var resp = await getDropDownMenuListApi();
      if (resp.success) {
        this.menuOptions = resp.data;
      } else {
        this.targaMessageBox(this, resp.msg);
      }
    },
    // 获取项目计划List
    async getProjectPlanOption(query) {
      var resp = await getProjectPlanBaseListApi({ search: query, page: 1, page_size: 20 })
      if (resp.success) {
        this.projectPlanOption = resp.data.results;
      } else {
        this.projectPlanOption = [];
      }
    },
    // 获取初始值
    async handleChange() {
      // 根据项目计划书下拉选择框的选择，自动筛选该项目计划书下的所有报价单
      if (this.form.projectPlanFK) {
        this.quoteOption = this.AllquoteOption.filter(item => item.projectPlanFK === this.form.projectPlanFK);
      }
      // 根据选择的项目计划书和报价单，自动获取该项目计划书下的所有项目开发信息
      if (this.form.projectPlanFK && this.form.quoteFK) {
        var resp = await getProjectDevelopInitDataApi(this.form)
        if (resp.success) {
          this.form.sales_date = resp.data.sales_date
          this.form.quote_amount = resp.data.quote_amount
          this.form.sales_amount = resp.data.sales_amount
          this.form.operating_profit = resp.data.operating_profit
          this.form.operating_margin = resp.data.operating_margin
          this.form.quoted_days = resp.data.quoted_days
          this.form.quoted_hours = resp.data.quoted_hours
          this.form.a1bugdget_hours = resp.data.a1bugdget_hours
          this.form.a2manage_hours = resp.data.a2manage_hours
          this.form.reserve_amount = resp.data.reserve_amount
          this.form.a3risk_hours = resp.data.a3risk_hours
        } else {
          this.form = {}
        }
      }
    },
    // 获取报价单List
    async getQuoteData(query) {
      query = 'D'
      var resp = await getProjectQutaListApi({ quote_type: query, page: 1, page_size: 20 })
      if (resp.success) {
        this.AllquoteOption = resp.data.results;
      } else {
        this.AllquoteOption = [];
      }
    },
    handleCreate() {
      this.submitForm('create', this.$t('createSuccess', { title: this.$t('quoteNo'), value: this.form.quote_no }))
    },
    handleUpdate() {
      this.submitForm('update', this.$t('updateSuccess', { title: this.$t('quoteNo'), value: this.form.quote_no }))
    }
  }
};
</script>

<style scoped>
.el-input input, .table-select .el-input__inner {
    width: 220px;
    box-sizing: border-box;
}
::v-deep .el-form-item__label {
    text-align: right;
}
</style>
